<template>
  <div class="bg">
    <div class="title">定 时 点 设 置</div>
    <div class="main">
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: 100%; background: rgb(220, 220, 220)"
      >
        <el-table-column type="index" label="序号" min-width="20">
        </el-table-column>
        <el-table-column prop="name" label="定时点名称" min-width="40">
        </el-table-column>
        <el-table-column prop="round" label="播放周期" min-width="40">
        </el-table-column>
        <el-table-column prop="startDate" label="起始日期"> </el-table-column>
        <el-table-column prop="endDate" label="终止日期"> </el-table-column>
        <el-table-column prop="startTime" label="开始时间"> </el-table-column>
        <el-table-column prop="endTime" label="结束时间"> </el-table-column>
        <el-table-column prop="showSource" label="节目源"> </el-table-column>
      </el-table>
    </div>
    <div class="under">
      <div class="proposal">
        <div class="name">方 案 操 作</div>
        <div class="left">
          <button class="proposalButton" @click="proposalMonitor">
            方案操作
          </button>
          <select id="proposal" v-model="selectedProposal">
            <option value="" disabled selected hidden>默认方案</option>
            <option
              v-for="(item, index) in proposals"
              :key="index"
              :value="item.id"
            >
              {{ item.name }}
            </option>
          </select>
        </div>
      </div>
      <div class="setTime">
        <div class="name" @click="">定 时 操 作</div>
        <div class="content">
          <button
            v-for="(item, index) in buttonName"
            :key="index"
            @click="jump(index, item)"
          >
            {{ item }}
          </button>
        </div>
      </div>
      <div class="exec">
        <button class="execute">立即执行</button>
      </div>
      <div class="saveOrExit">
        <button class="save">保存</button>
        <button class="exit" @click="exit">退出</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const selectedProposal = ref("");
const proposals = ref([
  {
    name: "fangany1",
    id: "1",
  },

  
  {
    name: "fangan2",
    id: "2",
  },
  {
    name: "fangany3",
    id: "3",
  },
  {
    name: "fangany4",
    id: "4",
  },
  {
    name: "fangany5",
    id: "5",
  },
]);
const tableData = ref([
  {
    number: "1",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
  {
    number: "2",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
  {
    number: "3",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
  {
    number: "4",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
  {
    number: "1",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
  {
    number: "2",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
  {
    number: "3",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
  {
    number: "4",
    name: "mincheng",
    round: "播放周期",
    startDate: "2016-05-03",
    endDate: "2016-05-04",
    startTime: "1点",
    endTime: "2dian",
    showSource: "111",
  },
]);
const buttonName = ref(["添加", "删除", "复制", "修改", "检索", "详细信息"]);
const exit = () => {
  router.push({ path: "/" })
};

const proposalMonitor = () => {
  router.push("/proposal_monitor");
  console.log("转去");
};

const jump = (index, item) => {
  if (index === 5) {
    router.push("/TimingPoint_Iofor");
  }
  if (index === 4) {
    router.push("/TimingPoint_searchingView");
  }
  if (index === 0) {
    router.push("/addTimingPointView");
  }

};
</script>
<style lang="less" scoped>
@import url("./setTimePoint.less");
</style>